import { useState } from 'react'
import MusicBasicSetting from './MusicBasicSetting'
import MusicVisualization from './MusicVisualization'
import { NoteVisualzation } from '@/views/music/noteVisualzation'
import styles from './scss/MusicMenu.module.scss'
import MusicSpectrum from './MusicSpectrum'
import MusicImport from './MusicImport'
import MusicAbout from './MusicAbout'

interface Menu {
  title: string
  view: React.FC
  // icon: string
}

const menus: Menu[] = [
  {
    title: '基本设置',
    view: MusicBasicSetting,
  },
  {
    title: '可视化',
    view: MusicVisualization,
  },
  {
    title: '音符可视化',
    view: NoteVisualzation,
  },
  {
    title: '琴谱',
    view: MusicSpectrum,
  },
  {
    title: 'MIDI导入',
    view: MusicImport,
  },
  {
    title: '关于',
    view: MusicAbout,
  },
]

export default function MusicMenu() {
  const [activeIndex, setActiveIndex] = useState(0)
  const ActiveView = menus[activeIndex].view
  return (
    <>
      <div className={styles['music-menu']}>
        {menus.map((menu, index) => (
          <div
            className={`${styles['music-menu-item']}${
              index == activeIndex ? ` ${styles['music-menu-item-active']}` : ''
            }`}
            key={index}
            onClick={() => setActiveIndex(index)}>
            {menu.title}
          </div>
        ))}
      </div>
      <div className={styles['music-menu-content']}>
        <ActiveView></ActiveView>
      </div>
    </>
  )
}
